<%--
  Created by IntelliJ IDEA.
  User: zhjun
  Date: 2024/4/11
  Time: 16:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <style>
        body,html{
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
        }
        body{
            background-color: rgb(72, 61, 139);
            display: flex;
            justify-content: center;
        }
        .input{
            width: 100%;
            height: 100%;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        .reg_panel{
            box-sizing: border-box;
            width: 500px;
            height: 100%;
            border-top: solid red 3px;
            border-right: solid red 3px;
            border-left: solid red 3px;
            display: flex;
            flex-direction: column;
            align-items: center;
            background-color: white;
        }
        .reg_panel>span{
            font-size: 25px;
            font-weight: bolder;
            letter-spacing: 20px;
            margin-top: 20px;
        }
        .reg_form{
            box-sizing: border-box;
            width: 80%;
            display: flex;
            flex-direction: column;
            margin-top: 30px;
            justify-content: space-between;
        }
        .reg_form>*{
            margin-top: 5px;
            width: 100%;
            height: 30px;
        }
        .tel_input{
            width: 100%;
            display: flex;
            height: 30px;
        }
        .tel_input>input{
            width: 70%;
            margin-left: 5px;
        }
        .tel_input>select{
            width: 30%;
            background-color: gray;
        }
        .radio_input{
            display: flex;
            justify-content: center;
        }
        .reg_button{
            margin-top: 0;
            border-radius: 0px;
            background-color: red;
            color: white;
            border: 0px;
        }
    </style>
    <script>
        function register(){
            let reg_form=document.getElementById("reg_form")

            let result=validate();
            if (!result.valid){
                alert(result.msg)
            }else{
                reg_form.submit();
            }
        }
        function validate(){
            let pass=document.getElementById("pass").value;
            let pass_check=document.getElementById("pass_check").value;
            if (pass!==pass_check){
                return {
                    valid:false,
                    msg:"密码不匹配"
                }
            }
            return {
                valid:true
            }
        }
    </script>
</head>
<body>
<div class="reg_panel">
    <span>注册</span>
    <form class="reg_form" action="register" method="get" id="reg_form">
        <div class="tel_input">
            <select>
                <option>中国大陆+86</option>
                <option>其他地区</option>
            </select>
            <input class="input" name="telephone"/>
        </div>
        <input class="input" placeholder="输入用户名" name="username"/>
        <input class="input" placeholder="邮箱" name="email"/>
        <input class="input" placeholder="输入密码" type="password" name="password" id="pass"/>
        <input class="input" placeholder="确认密码" type="password" id="pass_check"/>
        <div class="radio_input">
            <label for="male">男</label>
            <input type="radio" value="M" id="male" checked name="sex"/>
            <label for="female">女</label>
            <input type="radio" value="F" id="female" name="sex"/>
        </div>
        <input type="button" class="reg_button" value="注册" onclick="register()"/>
    </form>
</div>
</body>
</html>
